<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 32px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 订单管理
      </el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 20px;" >
      <el-breadcrumb-item :to="{ path: '/' }">
       订单列表
      </el-breadcrumb-item>

    </el-breadcrumb>

    <el-table
        :data="tableData"
        border
        style="width: 100%;margin-top: 30px"
        >
      <el-table-column
          prop="id"
          label="订单编号"
          width="220"
          align="center">
      </el-table-column>
      <el-table-column
          prop="kindName"
          label="服务类型"
          width="220"
          align="center">
      </el-table-column>
      <el-table-column
          prop="money"
          label="商品金额"
          width="220"
          align="center">
      </el-table-column>
      <el-table-column
          prop="stateName"
          label="订单状态"
          width="220"
          align="center">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
        <div>
          <el-button  type="text">修改</el-button>
          <el-button  type="text" @click="remove(scope.row)">删除</el-button>
        </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "CategoryItemList",
  data(){
    return{
      tableData:[]
    }
  },
  created() {
    this.order();
  },
  methods:{
    remove(k){
      let url = 'http://localhost:9081/orders/'+k.id+'/delete/';
      this.axios.
      create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message:  '删除成功！',
            type: 'success',
          });
          this.order();
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadCategoryList();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      })
    },
    order(){
      let url = 'http://localhost:9081/orders';
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        console.log('state=' + responseBody.state);
        console.log('message=' + responseBody.message);
        this.tableData = responseBody.data;
console.log(this.tableData)
      });
    }
  }

}

</script>

<style scoped>

</style>